﻿@model IEnumerable<billtracker.Models.bill>
<div id="popUp"style="display:none;">
<div id="detailsDiv" class="modal hide fade in" style="display: block;">
</div>
</div>
<p>
    <a href="#" onclick="loadPartialCreateView()">Create New</a>
</p>
<div id="info">
</div>
<div style="width: 50%;">
<table class="table table-striped">
    <tr>
        <th>
            Name
        </th>
        <th>
            Amount
        </th>
        <th>
            Frequency
        </th>
        <th></th>
    </tr>
@{
    decimal total = 0;
    string icon = "<i class='icon-pencil icon-white'></i> ";
  }
@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.name)
        </td>
        <td>
            $@Html.DisplayFor(modelItem => item.amount)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Frequency.name)

        </td>
        <td>
           <!-- @Html.ActionLink("Edit", "Edit", new { id = item.billId })-->
           <!-- @Html.ActionLink("Details", "Details", new { id = item.billId })-->
           <a href="#" onclick="loadPartialEditView(@item.billId)" class="btn btn-success"><i class="icon-pencil icon-white"></i> Edit</a>

          <a href='@Url.Action("Delete", new { id = item.billId })' class="btn btn-danger"><i class="icon-trash icon-white"></i> Delete</a>                   

        </td>
    </tr>
              total += item.amount;
}
<tr>
        <th>
 
        </th>
        <th>
        $@total.ToString("#0.00")
        </th>
        <th>
 
        </th>
        <th></th>
    </tr>
   
</table>
</div>
<script type="text/javascript">
    function loadPartialEditView(id) {
        url = '@Url.Action("_Edit", "Bills")';
        url += '/' + id;
        $.get(url, function (data) {
            $('#detailsDiv').html(data);
            $("#popUp").show("slow");
        });
    }
    function loadPartialCreateView(id) {
        url = '@Url.Action("_Create", "Bills")';
        url += '/' + id;
        $.get(url, function (data) {
            $('#detailsDiv').html(data);
            $("#popUp").show("slow");
        });


    }
</script>